<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES6新特性</title>
    <style>
        .item{
            width: 500px;
            margin: 10px;
            background-color: blanchedalmond;
            line-height: 100px;
            text-align: center;
            line-height: 100px;
            font-size: 30px;

        }
    </style>
    <!-- <script defer src="./3.symbol.js"></script> -->
    <!-- <script defer src="./4.iterator.js"></script> -->
    <!-- <script defer src="./6.expand-operator.js"></script> -->
    <!-- <script defer src="./7.generater.js"></script> -->
    <!-- <script defer src="./8.set.js"></script> -->
    <!-- <script defer src="./10.promise.js"></script> -->
    <!-- <script defer src="./13.Object-new-features.js"></script> -->
</head>

<body>
    <div class="container" id="some-id">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    <script type="text/javascript">
        // 选择需要观察变动的节点
        const targetNode = document.getElementById('some-id');
        // 观察器的配置（需要观察什么变动）
        const config = { attributes: true, childList: true, subtree: true };
        // 当观察到变动时执行的回调函数
        const callback = function (mutationsList, observer) {
            // Use traditional 'for loops' for IE 11
            for (let mutation of mutationsList) {
                if (mutation.type === 'childList') {
                    console.log('A child node has been added or removed.');
                }
                else if (mutation.type === 'attributes') {
                    console.log('The ' + mutation.attributeName + ' attribute was modified.');
                }
            }
        };

        // 创建一个观察器实例并传入回调函数
        const observer = new MutationObserver(callback);

        // 以上述配置开始观察目标节点
        observer.observe(targetNode, config);

        targetNode.style.border = "1px solid #eee"
        // 之后，可停止观察
        //observer.disconnect();
    </script>
</body>

</html>